<template>
    <el-card shadow="hover">
        <div ref="chartRef" :style="{ width: props.width, height: props.height }"></div>
    </el-card>
    
</template>

<script setup lang="ts">
import { useEcharts } from '@/hooks/useEcharts'
import * as echarts from 'echarts'

const props = withDefaults(defineProps<{
    width?: string,
    height?: string,
    theme?: string,
    bgColor?: string,
    title: string,
    subtitle?: string,
    data: any[], // 曲线数据
    xAxisData: string[] | number[] // X 轴数据
}>(), {
    width: '100%',
    height: '380px',
    data: () => []
})

const option = {
    backgroundColor: props.bgColor,
    title: {
        text: props.title,
        subtext: props.subtitle,
        x: 'left'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow',
        }
    },
    xAxis: [
        {
            type: 'category',
            data: props.xAxisData
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: {
        data: props.data,
        type: 'bar',
        itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#83bff6' },
                { offset: 0.5, color: '#188df0' },
                { offset: 1, color: '#188df0' }
            ]),
        }
    }
}

const { chartRef, chart, echartsResizeFun } = useEcharts({props, option})
</script>

<style scoped>

</style>